<template>
  <div class='total-revenue-container'>
    <div class='total-revenue-header' :style='"height:" + headerHeight'>
      <div class='title'>
        总收入、总成本和总收益
      </div>
      <div class='query'>
        <a-radio-group v-model='queryParam.type' default-value='0' button-style='solid'>
          <a-radio-button value='0'>
            日
          </a-radio-button>
          <a-radio-button value='1'>
            月
          </a-radio-button>
          <a-radio-button value='2'>
            年
          </a-radio-button>
        </a-radio-group>
      </div>
    </div>
    <bar :loading='loading' id='total-revenue-container' :height='`calc(100% - ${headerHeight})`'  :xData='xData' :yData='yData' />
  </div>
</template>

<script>
import Bar from '@/business-components/charts/bar.vue'

export default {
  props: {},
  components: {
    Bar
  },
  data() {
    return {
      options: {},
      xData: [
        '总收入',
        '总成本',
        '总收益'
      ],
      headerHeight: '40px',
      queryParam: {
        type: '0'
      },
      loading: false,
      yData: [
        200, 150, 300
      ]
    }
  },
  methods: {
    getData() {
      this.loading = true
      setTimeout(() => {
        this.loading = false
      })
    }
  },
  mounted() {
    this.getData()
  }
}
</script>

<style lang='less' scoped>
.total-revenue-container {
  width: 100%;
  height: 100%;
  .total-revenue-header{
    display: flex;
    justify-content: space-between;
    .title{
      font-size: 16px;
      font-weight: 800;
      color: #1A1A1A;
    }
  }
}
</style>